<template>
  <Dialog :visible.sync="dialog.visible" :title="dialog.title" :width="dialog.width" @onClose='onClose'
    @onConfirm='confirm' :height="dialog.height">
    <template v-slot:content>
      <el-form ref="addUserForm" :model="addUserModel" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserModel.username" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="addUserModel.nickName" />
        </el-form-item>
        <el-form-item label="电话号码" prop="tel">
          <el-input v-model="addUserModel.tel" />
        </el-form-item>
      </el-form>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
const emit = defineEmits(['save'])
import Dialog from '@/components/dialog/Dialog.vue';
import { useDialog } from '@/hooks/useDialog'
import { useUserAddAndEdit } from '@/composables/user/useUserAddAndEdit';
import { useBaseModel } from '@/composables/user/useBaseModel'
const { addUserModel, rules } = useBaseModel()
const { dialog, onClose, onShow } = useDialog()
const { confirm, show, addUserForm } = useUserAddAndEdit(dialog, onClose, onShow, addUserModel, emit)
//暴露方法给外部使用
defineExpose({
  show
})
const formSize = ref('default')



</script>

<style lang="scss" scoped></style>